<template>
  <div class="table-container">
    <div class="table-content">
      <div v-if="mergeConfig.search" class="table-search"><slot name="searchForm" /></div>
      <div class="content">
        <div class="hearder">
          <div class="left" />
          <div class="right">
            <el-button
              v-for="(item, index) in mergeConfig.headerBtn"
              :key="index"
              v-bind="headerBtnConfig(item.config)"
              @click="$emit('handleEdit', { type: 'headerBtn', params: item })"
              >{{ item.label }}</el-button
            >
          </div>
        </div>
        <el-table v-loading="listLoading" :data="data" class="mytable" v-bind="mergeConfig.tableConfig">
          <template v-for="(item, index) in mergeConfig.tableColumns">
            <el-table-column
              v-if="!item.editType"
              :key="index"
              :prop="item.prop"
              :label="item.label"
              :width="item.width ? item.width : undefined"
              min-width="150"
              v-bind="item.config"
            >
              <template slot-scope="{ row }">
                <!-- func -->
                <span v-if="item.func">{{ item.func(row) }}</span>
                <!-- 图片 -->
                <x-img v-else-if="item.isPic" :src="row[item.prop]" class="x-img" preview-src-list />
                <!-- 地区 -->
                <span v-else-if="item.isArea">{{ getCityStr(row[item.prop]).join('/') }}</span>
                <!-- 日期 -->
                <span v-else-if="item.isDate">{{
                  formatDate(row[item.prop], item.isDate == 'date' ? 'Y-m-d' : undefined)
                }}</span>
                <!-- 多选 -->
                <span v-else-if="item.statusList">{{ statusList(row[item.prop], item.statusList) }}</span>
                <!-- 插槽 -->
                <slot v-else-if="item.slot" :name="item.prop" v-bind="row" />
                <!-- 正常显示 -->
                <template v-else>
                  <el-tooltip :content="row[item.prop]" placement="top">
                    <div class="espli">{{ row[item.prop] }}</div>
                  </el-tooltip>
                </template>
              </template>
            </el-table-column>
            <el-table-column
              v-if="item.editType"
              :key="index"
              :label="item.label"
              :width="item.width ? item.width : undefined"
              min-width="120"
              fixed="right"
            >
              <!-- 操作 -->
              <template slot-scope="{ row }">
                <el-button
                  v-if="config.editType[0]"
                  type="text"
                  size="small"
                  @click="
                    $emit('handleEdit', { type: 'edit', params: { editType: config.editType[0], row } })
                  "
                >
                  {{ config.editType[0].label }}
                </el-button>
                <el-button
                  v-if="config.editType[1]"
                  type="text"
                  size="small"
                  @click="
                    $emit('handleEdit', { type: 'edit', params: { editType: config.editType[1], row } })
                  "
                  >{{ config.editType[1].label }}
                </el-button>
                <span style="margin-left: 10px" />
                <el-dropdown
                  v-if="config.editType.length > 2"
                  class="table-editbtn-dropdown"
                  :placement="'bottom'"
                >
                  <el-button type="text" size="small"> 更多 </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      v-for="(editItem, downIndex) in config.editType.slice(2)"
                      :key="downIndex"
                      ><el-button
                        type="text"
                        size="small"
                        @click="$emit('handleEdit', { type: 'edit', params: { editType: editItem, row } })"
                        >{{ editItem.label }}
                      </el-button></el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </template>
        </el-table>
      </div>
    </div>
    <div v-if="mergeConfig.pagination" class="pagination">
      <el-pagination background layout="prev, pager, next" :total="total" @current-change="currentChange" />
    </div>
  </div>
</template>

<script>
import { getCityStr, formatDate } from '@/utils/index'
export default {
  props: {
    listLoading: Boolean,
    config: {
      type: Object,
      default() {
        return {
          // tableConfig, 表格配置
          // tableColumns, 列配置
          // pagination, 是否分页
        }
      }
    },
    data: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      defaultConfig: {
        search: false,
        pagination: true, // 分页
        headerBtn: [],
        tableConfig: {
          border: false, // 是否加边框
          fit: true, // 列的宽度是否自撑开
          'highlight-current-row': true, // 行高亮
          'element-loading-text': 'Loading', // 加载文字
          height: '420' // 最大高度
        },
        tableColumns: [],
        editType: []
      },
      total: 100,
      pageParams: {
        page: 0,
        pageSize: 10
      }
    }
  },
  computed: {
    mergeConfig() {
      const tableConfig = Object.assign(this.defaultConfig.tableConfig, this.config.tableConfig)
      const tableColumns = this.config.tableColumns || this.defaultConfig.tableColumns
      const editType = this.config.editType || this.defaultConfig.editType
      const headerBtn = this.config.headerBtn || this.defaultConfig.headerBtn
      return {
        tableConfig,
        tableColumns,
        editType,
        headerBtn,
        search: this.config.search || this.defaultConfig.search,
        pagination: this.config.pagination || this.defaultConfig.pagination
      }
    }
  },
  methods: {
    formatDate,
    getCityStr,
    statusList(arr, statusList) {
      return statusList
        .filter(item => {
          if (arr.find(itm => itm === item.value)) {
            return true
          }
        })
        .map(item => item.label)
        .toString()
    },
    headerBtnConfig(config) {
      return Object.assign(
        {
          type: 'primary',
          size: 'mini'
        },
        config
      )
    },
    totalElements(total) {
      this.total = total
    },
    currentChange(current) {
      this.pageParams.page = current-1
      this.$emit('handleEdit', { type: 'pageChange' })
    }
    // prevClick() { alert(2) },
    // nextClick() { alert(3) }
  }
}
</script>

<style lang="scss" scoped>
.table-container {
  height: 100%;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .table-content {
    height: 100%; // 相当于flex：1
    display: flex;
    flex-direction: column;
    .table-search {
      padding-top: 18px;
      padding-left: 18px;
      display: flex;
      justify-content: flex-end;
      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    }
    .content {
      flex: 1;
      padding: 20px;
      .x-img {
        width: 50px;
        height: 50px;
      }
    }
  }

  .hearder {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    .right {
      display: flex;
    }
  }
  .pagination {
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-end;
  }
  .table-editbtn-dropdown {
    font-size: 12px;
    vertical-align: middle;

    & > .table-edit-dropdown-text {
      padding: 7px;
      cursor: pointer;
    }
  }
  .espli {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
}
</style>
